<template>
  <div class="layout">
    <el-container>
      <el-header>
        <div style="font-size: 24px; font-weight: bolder">EasyBlog-Vue3</div>
        <div class="account">
          <div class="accountMsg">
            <span>欢迎回来,</span>
            <el-dropdown>
              <span>
                {{ userInfo.nickName }}
                <i class="iconfont icon-sort-down"></i>
              </span>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人信息</el-dropdown-item>
                  <el-dropdown-item @click="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <img :src="userInfo.avatar" />
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <el-button>发布</el-button>
          <!-- 菜单 -->
          <my-menu class="mymenu"></my-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import MyMenu from '../components/MyMenu.vue'
import VueCookies from 'vue-cookies'
import { require } from '@/utils/Require'
import { useRouter } from 'vue-router'

// header登录信息
const userInfo = ref({
  nickName: '游客',
  avatar: require("@/assets/img/avatar.png")

})
const { proxy } = getCurrentInstance()
const imgUrl = proxy.globalInfo.imageUrl
onMounted(() => {
  // 获取登录信息和头像
  userInfo.value = VueCookies.get('userInfo')
  userInfo.value.avatar = imgUrl + userInfo.value.avatar
  console.log(userInfo.value)

})
//{userId: 100003, nickName: 'junson', avatar: '202209/dUTIjaablvTKvdyoljYpSCeBHzUguN.jpg', roleType: 0}[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false
// 退出登录
const router = useRouter()
const logout = () => {
  proxy.Message.success('退出成功,正在跳转登录页...')
  setTimeout(() => {
    router.push('/login')
  }, 1500)

}

</script>

<style lang="scss" scoped>
.layout {
  background-color: #ddd;
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-bottom: 2px #ddd solid;
    .account {
      display: flex;
      align-items: center;
      .accountMsg {
        display: flex;
        align-items: center;
        .el-dropdown {
          span {
            margin-left: 10px;
            font-size: 17px;
            color: #51a7ff;
            cursor: pointer;
          }
        }
        img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
        }
      }
    }
  }
  .el-container {
    padding: 10px;
    .el-aside {
      width: 250px;
      height: calc(100vh - 100px);
      padding: 15px;
      overflow-y: hidden;
      // background-color: pink;
      .el-button {
        height: 40px;
        width: 100%;
        background-color: green;
        color: #fff;
      }
      .mymenu {
        height: 100%;
        margin-top: 10px;
      }
    }
    .el-main {
      background-color: #fff;
    }
  }
}
</style>